<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>预约记录列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet"
	href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
		<form class="layui-form">
			<div class="layui-inline dynamicShow1">
				<label class="layui-form-label">门店</label>
				<div class="layui-input-block">
					<select name="merchantId" id="merchantId">
						<option value="">--请选择门店--</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">预约时间</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="timeRange"
						placeholder="请输入预约时间" id="searchTime">
				</div>
			</div>
			
			<div class="layui-inline">
				<label class="layui-form-label">关键字</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="keyword"
						placeholder="姓名/电话/车牌号码">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">预约项目</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="productName"
						placeholder="请输入预约项目">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-block">
					<select name="status">
						<option value="">--请选择状态--</option>
						<option value="0">待开单</option>
						<option value="1">已开单</option>
						<option value="-1">已取消</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<a class="layui-btn search_btn" lay-submit=""
					lay-filter="querySubscribe">查询</a>
			</div>
			<div class="layui-inline dynamicShow">
				<a class="layui-btn layui-btn-normal subscribesAdd_btn">新建预约单</a>
			</div>
		</form>

	</blockquote>
	<div class="layui-form news_list">
		<table class="layui-table" id="subscribeList" lay-filter="subscribes"></table>
	</div>
	<div id="page"></div>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="plugins/layui/layui.all.js"></script>
	<script type="text/javascript" src="js/user/newsList.js"></script>

	<script type="text/html" id="barDemo">
		{{# if(d.subscribeStatus==0){ }}
      	<a class="layui-btn layui-btn-xs" lay-event="open"><i class="iconfont icon-edit"></i>开单</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="iconfont icon-edit"></i>编辑</a>
	    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel"><i class="layui-icon"></i>取消</a>
        {{# }else if(d.subscribeStatus==1){ }}
	<a class="layui-btn layui-btn-xs" lay-event="todetail"><i class="iconfont icon-edit"></i>查看工单</a>
	 {{# } }}
  </script>
	
	<script type="text/javascript">
		//重新渲染表单
		function renderForm() {
			layui.use('form', function() {
				var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
				form.render();
			});
		}
		layui.config({
			base : '/js/admin/'
		}).extend({
			ajaxExtention : 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
			$tool : 'tool'
		}).use([ 'table', 'form', '$tool', 'laydate' ], function() {
			var table = layui.table;
			var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
			$tool = layui.$tool;
			var laydate = layui.laydate;


            $.ajax({
                type : "GET",
                url: '/merchants/merchants.json',
                dataType:'json',
                async:false,
                success: function(data){
                    var list=data.data;
                    var html='';
                    for(var i=0;i<list.length;i++){
                        html += "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
                    }
                    $("#merchantId").append(html);
                    form.render();
                }
            });
			//日期时间范围选择
			laydate.render({
				elem : '#searchTime',
				type : 'date',
				range : true
			//或 range: '~' 来自定义分割字符
			});

            var isAdminstr=localStorage.getItem("isAdmin");
            var isAdmin=isAdminstr=='true'?true:false;
            if(isAdmin){
                $(".dynamicShow").hide();
                $(".dynamicShow1").show();
            }else {
                $(".dynamicShow").show();
                $(".dynamicShow1").hide();
            }
			//方法级渲染  0预约中,-1取消,1开单,2结算 products
			var tableIns = table.render({
				elem : '#subscribeList',
				url : '/subscribe/subscribeList',
				cols : [ [
                    {field:'subscribeId', title: 'ID', width:'10%'}
					,{
				    field:'merchantName',
					title: isAdmin?'所属门店':'',
					width:isAdmin?'10%':'0%',
					minWidth:'0%',
					type:isAdmin?'':'space',
					style:isAdmin?'':'display:none'
				}, {
					field : 'username',
					title : '姓名',
					width : '10%',
				}, {
					field : 'phone',
					title : '手机号',
					width : '10%',
				}, {
					field : 'carNum',
					title : '车牌号码',
					width : '10%'
				}, {
				    field : 'frameNum',
						title : '车架号',
						width : '10%'
					}, {
					field : 'subscribeTime',
					title : '预约时间',
					width : '10%',
					templet:function(d){
						if(d.subscribeTime!=null){
							return $tool.formatTime(d.subscribeTime);
						}
					}
				}, {
					field : 'products',
					title : '预约项目',
					width : '10%'
				}, {
					field : 'price',
					title : '预约报价',
					width : '10%'
				}, {
					field : 'subscribeStatus',
					title : '状态',
					width : '10%',
					templet : function(d) {
						if (d.subscribeStatus == 0) {
							return "预约中";
						} else if (d.subscribeStatus == -1) {
							return "已取消";
						} else if (d.subscribeStatus == 1) {
							return "已开单";
						} else if (d.subscribeStatus == 2) {
							return "已结算";
						}
					}
				}, {
					title : '操作',
					align : 'center',
					toolbar : '#barDemo'
				} //这里的toolbar值是模板元素的选择器
				/*  ,{field:'date', title: '日期', width:180}
				,{field:'datatype', title: '日期类型', width:100}*/

				] ],
				id : 'testReload',
				page : true,
//				height : 600
			});

			form.on("submit(querySubscribe)", function(data) {
				var timeRange = data.field.timeRange;
				var status = data.field.status;
				var productName = data.field.productName;
				var keyword=data.field.keyword;
				var merchantId=data.field.merchantId;
				//表格重新加载
				tableIns.reload({
					where : {
						timeRange : timeRange,
						status:status,
						productName:productName,
						keyword:keyword,
						merchantId:merchantId
					}
				});

				return false;
			});

			table.on('tool(subscribes)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'edit') { //编辑
					var subscribeId = obj.data.subscribeId;
					editSubscribe(subscribeId);
					//do somehing
				} else if (layEvent === 'cancel') { //删除
					//向服务端发送取消指令
					var subscribeId = obj.data.subscribeId;
					$.ajax({
						type : "POST",
						url : "/subscribe/cancel",
						data : {
							subcribeId : subscribeId
						},// 序列化表单值  
						success : function(data) {
							if (data.code == 2000) {
								//top.layer.close(index);
								top.layer.msg("取消预约成功");
								//parent.location.reload();
								tableIns.reload();
							}
						},

						error : function(request) {
							alert("Connection error");
						}
					});

				} else if (layEvent === 'open') { //编辑
					//do something
					var subscribeId = obj.data.subscribeId;
					$.ajax({
						type : "POST",
						url : "/subscribe/open",
						data : {
							subcribeId : subscribeId
						},// 序列化表单值  
						success : function(data) {
							if (data.code == 2000) {
								//top.layer.close(index);
								top.layer.msg("开单成功");
								//parent.location.reload();
								toSubscribeDetail(subscribeId);
								
							}
						},

						error : function(request) {
							alert("Connection error");
						}
					});
				
				}else if(layEvent === 'todetail'){
					var subscribeId = obj.data.subscribeId;
					toSubscribeDetail(subscribeId);
				}
			});
		});

		$(window).one("resize", function() {
			$(".subscribesAdd_btn").click(function() {
				var index = layui.layer.open({
					title : "新建预约单",
					type : 2,
					content : "subscribe/subscribesAdd.html",
					success : function(layero, index) {

					}
				})
				layui.layer.full(index);
			})
		}).resize();

		var categoryList;
		$.ajax({
			type : "GET",
			url : 'categorys/getAlls',
			dataType : 'json',
			async : false,
			success : function(data) {
				var list = data.data;
				categoryList = list;
				var html = '';
				for (var i = 0; i < list.length; i++) {
					html += "<option value='"+list[i].id+"'>" + list[i].name
							+ "</option>"
				}
				$("select[name='categoryId']").append(html);
				renderForm();//表单重新渲染，要不然添加完显示不出来新的option
			}
		});

		function editSubscribe(id) {
			var index = layui.layer.open({
				title : "编辑预约单",
				type : 2,
				content : "subscribe/subscribesEdit.html?id=" + id,
				success : function(layero, index) {

				}
			});

			//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
			$(window).resize(function() {
				layui.layer.full(index);
			});
			layui.layer.full(index);
		}
		
		function toSubscribeDetail(id){
			var index = layui.layer.open({
				title : "编辑服务记录",
				type : 2,
				content : "subscribe/service_detail.html?id=" + id,
				success : function(layero, index) {

				}
			});

			//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
			$(window).resize(function() {
				layui.layer.full(index);
			});
			layui.layer.full(index);
		}
	</script>
</body>
</html>